

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <title>底部导航栏 - MDUI 框架示例,Material Design 示例</title>
    <link rel="stylesheet" href="../assets/mdui-v0.4.0/css/mdui.min.css"/>
    <link rel="stylesheet" href="../assets/demo/css/demo.css"/>
    

</head>
<body>


<div class="preview-container"></div>

<div class="editor-panel">

    <div class="editor-controls mdui-p-x-1">

        <div class="editor-control-html mdui-ripple editor-control-active" onclick="Editor.toogleHTML();">HTML</div>
        <div class="editor-control-css mdui-ripple " onclick="Editor.toogleCSS();">CSS</div>
        <div class="editor-control-js mdui-ripple " onclick="Editor.toogleJS();">JavaScript</div>

        <div class="editor-controls-drag"></div>

        <div class="editor-controls-run mdui-btn mdui-btn-icon mdui-ripple mdui-m-x-1 mdui-text-color-black-secondary" mdui-tooltip="{content: '运行 Ctrl + Enter'}" onclick="Editor.run();"><i class="mdui-icon material-icons">play_arrow</i></div>
        <label class="editor-controls-live-mode mdui-switch mdui-m-x-1" mdui-tooltip="{content: '实时预览'}" onchange="Editor.toogleLiveMode();">
            <input type="checkbox" checked/>
            <i class="mdui-switch-icon"></i>
        </label>
        <!--<div class="mdui-controls-download mdui-btn mdui-btn-icon mdui-ripple mdui-m-x-1" mdui-tooltip="{content: '下载'}" onclick="Editor.download();"><i class="mdui-icon material-icons">file_download</i></div>-->

    </div>

    <div class="editor-container editor-container-html">
        <div class="editor-container-label">HTML</div>
        <pre id="editor-ace-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;&gt;
  &lt;title&gt;底部导航栏&lt;/title&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;../assets/mdui-v0.4.0/css/mdui.min.css&quot;/&gt;
&lt;/head&gt;
&lt;body class=&quot;mdui-bottom-nav-fixed&quot;&gt;

&lt;div class=&quot;mdui-bottom-nav&quot;&gt;
  &lt;a href=&quot;javascript:;&quot; class=&quot;mdui-ripple mdui-bottom-nav-active&quot;&gt;
    &lt;i class=&quot;mdui-icon material-icons&quot;&gt;history&lt;/i&gt;
    &lt;label&gt;Recents&lt;/label&gt;
  &lt;/a&gt;
  &lt;a href=&quot;javascript:;&quot; class=&quot;mdui-ripple&quot;&gt;
    &lt;i class=&quot;mdui-icon material-icons&quot;&gt;favorite&lt;/i&gt;
    &lt;label&gt;Favorites&lt;/label&gt;
  &lt;/a&gt;
  &lt;a href=&quot;javascript:;&quot; class=&quot;mdui-ripple&quot;&gt;
    &lt;i class=&quot;mdui-icon material-icons&quot;&gt;location_on&lt;/i&gt;
    &lt;label&gt;Nearby&lt;/label&gt;
  &lt;/a&gt;
&lt;/div&gt;

&lt;div class=&quot;mdui-container&quot;&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;p&gt;test&lt;/p&gt;
&lt;/div&gt;

&lt;script src=&quot;../assets/mdui-v0.4.0/js/mdui.min.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
    </div>
    <div class="editor-container editor-container-css">
        <div class="editor-container-label">CSS</div>
        <pre id="editor-ace-css"></pre>
    </div>
    <div class="editor-container editor-container-js">
        <div class="editor-container-label">JavaScript</div>
        <pre id="editor-ace-js"></pre>
    </div>

</div>

<script src="../assets/mdui-v0.4.0/js/mdui.min.js"></script>
<script src="../assets/ace-1.2.6/ace.js"></script>
<script src="../assets/ace-1.2.6/ext-language_tools.js"></script>
<script src="../assets/demo/js/live-editor.js"></script>
<script>
  var Editor = new LiveEditor();
</script>
</body>
</html>